<template>
  <!-- 作业管理-作业详情-个人 -->
  <div class="container-details">
    <div class="conTop">
      <div class="userMessage">
        <div class="userImg">
          <img src="../../assets/imgs/icon/icon_wdmrtxnan.png" alt="" />
        </div>
        <div class="userNameId">
          <span>刘子晨</span>
          <div>
            <img src="" alt="" />
            <span>ID:40938FET</span>
          </div>
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="userMsg">
        <div>
          <p>学期</p>
          <span>2020年 第一学期</span>
        </div>
        <div>
          <p>学号</p>
          <span>22020</span>
        </div>
        <div>
          <p>班级</p>
          <span>一年级（3）班</span>
        </div>
        <div>
          <p>年龄</p>
          <span>9</span>
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="userResult">
        <p>89.5</p>
        <span>平均成绩</span>
      </div>
    </div>
    <div class="conEcharts">
      <div>
        <div id="main1" style="width: 2.5521rem; height: 1.5625rem"></div>
      </div>
      <div>
        <div id="main2" style="width: 2.5521rem; height: 1.5625rem"></div>
      </div>
      <div>
        <div id="main3" style="width: 2.5521rem; height: 1.5625rem"></div>
      </div>
      <div>
        <div id="main4" style="width: 2.5521rem; height: 1.5625rem"></div>
      </div>
      <div>
        <div id="main5" style="width: 2.5521rem; height: 1.5625rem"></div>
      </div>
      <div>
        <div id="main6" style="width: 2.5521rem; height: 1.5625rem"></div>
      </div>
    </div>
    <div class="conList">
      <!-- 筛选 --- 导出 -->
      <el-form :inline="true" :model="formScreen" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="formScreen.project" placeholder="选择项目">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formScreen.class" placeholder="选择班级">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="inputTeacher"
            placeholder="请输入教师姓名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button>搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button>重置搜索</el-button>
          <el-button>导出列表</el-button>
        </el-form-item>
      </el-form>
      <!-- 分割 -->
      <el-divider></el-divider>
      <!-- 列表 -->
      <div class="content">
        <!-- 内容头部 -->
        <div class="conHeader">
          <div>当前结果：<span>总击 164 条记录</span></div>
          <el-select v-model="formScreen.custom" placeholder="自定义显示列">
            <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
          </el-select>
        </div>
        <!-- 内容主体 -->
        <div class="conBody">
          <!-- 多选列表 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="100">
            </el-table-column>
            <el-table-column prop="gradeIds" label="班级" width="200">
            </el-table-column>
            <el-table-column prop="teacherName" label="教师名字" width="200">
            </el-table-column>
            <el-table-column prop="courseType" label="活动类型" width="200">
            </el-table-column>
            <el-table-column prop="model" label="模式" width="200">
            </el-table-column>
            <el-table-column prop="achievement" label="成绩"> </el-table-column>
            <el-table-column prop="date" label="开始时间" width="200">
            </el-table-column>
            <el-table-column prop="operation" label="操作">
              <template slot-scope="scope">
                <el-select
                  v-model="operVal"
                  @change="changeVal(scope.row.courseId)"
                  placeholder="操作"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="1000"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formScreen: {
        project: '',
        class: '',
        custom: ''
      },
      tableData: [],
      options: [{
        value: '1',
        label: '删除'
      }, {
        value: '2',
        label: '修改'
      }],
      // operVal
      operVal: '',
      // 请输入教师姓名
      inputTeacher: ''
    }
  },
  created() {

  },
  methods: {
    myEcharts1() {
      let myChart = this.$echartsd.init(document.getElementById('main1'))
      let option = {
        title: {
          text: '累计训练项目次数占比',
          x: '10%',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: '10%',
          textStyle: {
            fontSize: 18,
            fontWeight: '500',
            color: '#525252'
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: '20%',
          top: '35%',
          data: ['平衡', '力量', '速度', '协调', '敏捷'],
          itemWidth: 13,
          itemHeight: 13
        },
        series: [
          {
            name: '访问来源',
            color: ['#ffd02e', '#fe7c73', '#0fdd8d', '#24aaff', '#4aeefb'],
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['30%', '55%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [
              { value: 200, name: '平衡' },
              { value: 200, name: '力量' },
              { value: 200, name: '速度' },
              { value: 200, name: '协调' },
              { value: 200, name: '敏捷' }
            ]
          }
        ]
      };
      myChart.setOption(option)
    },
    myEcharts2() {
      let myChart = this.$echartsd.init(document.getElementById('main2'))
      let option = {
        title: {
          text: '协调模式成绩占比',
          x: '10%',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: '10%',
          textStyle: {
            fontSize: 18,
            fontWeight: '500',
            color: '#525252'
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: '20%',
          top: '35%',
          data: ['平衡', '力量', '速度', '协调', '敏捷'],
          itemWidth: 13,
          itemHeight: 13
        },
        series: [
          {
            name: '访问来源',
            color: ['#ffd02e', '#fe7c73', '#0fdd8d', '#24aaff', '#4aeefb'],
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['30%', '55%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [
              { value: 200, name: '平衡' },
              { value: 200, name: '力量' },
              { value: 200, name: '速度' },
              { value: 200, name: '协调' },
              { value: 200, name: '敏捷' }
            ]
          }
        ]
      };
      myChart.setOption(option)
    },
    myEcharts3() {
      let myChart = this.$echartsd.init(document.getElementById('main3'))
      let option = {
        title: {
          text: '速度模式成绩占比',
          x: '10%',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: '10%',
          textStyle: {
            fontSize: 18,
            fontWeight: '500',
            color: '#525252'
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: '20%',
          top: '35%',
          data: ['平衡', '力量', '速度', '协调', '敏捷'],
          itemWidth: 13,
          itemHeight: 13
        },
        series: [
          {
            name: '访问来源',
            color: ['#ffd02e', '#fe7c73', '#0fdd8d', '#24aaff', '#4aeefb'],
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['30%', '55%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [
              { value: 200, name: '平衡' },
              { value: 200, name: '力量' },
              { value: 200, name: '速度' },
              { value: 200, name: '协调' },
              { value: 200, name: '敏捷' }
            ]
          }
        ]
      };
      myChart.setOption(option)
    },
    myEcharts4() {
      let myChart = this.$echartsd.init(document.getElementById('main4'))
      let option = {
        title: {
          text: '平衡模式成绩占比',
          x: '10%',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: '10%',
          textStyle: {
            fontSize: 18,
            fontWeight: '500',
            color: '#525252'
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: '20%',
          top: '35%',
          data: ['平衡', '力量', '速度', '协调', '敏捷'],
          itemWidth: 13,
          itemHeight: 13
        },
        series: [
          {
            name: '访问来源',
            color: ['#ffd02e', '#fe7c73', '#0fdd8d', '#24aaff', '#4aeefb'],
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['30%', '55%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [
              { value: 200, name: '平衡' },
              { value: 200, name: '力量' },
              { value: 200, name: '速度' },
              { value: 200, name: '协调' },
              { value: 200, name: '敏捷' }
            ]
          }
        ]
      };
      myChart.setOption(option)
    },
    myEcharts5() {
      let myChart = this.$echartsd.init(document.getElementById('main5'))
      let option = {
        title: {
          text: '力量模式成绩占比',
          x: '10%',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: '10%',
          textStyle: {
            fontSize: 18,
            fontWeight: '500',
            color: '#525252'
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: '20%',
          top: '35%',
          data: ['平衡', '力量', '速度', '协调', '敏捷'],
          itemWidth: 13,
          itemHeight: 13
        },
        series: [
          {
            name: '访问来源',
            color: ['#ffd02e', '#fe7c73', '#0fdd8d', '#24aaff', '#4aeefb'],
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['30%', '55%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [
              { value: 200, name: '平衡' },
              { value: 200, name: '力量' },
              { value: 200, name: '速度' },
              { value: 200, name: '协调' },
              { value: 200, name: '敏捷' }
            ]
          }
        ]
      };
      myChart.setOption(option)
    },
    myEcharts6() {
      let myChart = this.$echartsd.init(document.getElementById('main6'))
      let option = {
        title: {
          text: '敏捷模式成绩占比',
          x: '10%',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: '10%',
          textStyle: {
            fontSize: 18,
            fontWeight: '500',
            color: '#525252'
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: '20%',
          top: '35%',
          data: ['平衡', '力量', '速度', '协调', '敏捷'],
          itemWidth: 13,
          itemHeight: 13
        },
        series: [
          {
            name: '访问来源',
            color: ['#ffd02e', '#fe7c73', '#0fdd8d', '#24aaff', '#4aeefb'],
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['30%', '55%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [
              { value: 200, name: '平衡' },
              { value: 200, name: '力量' },
              { value: 200, name: '速度' },
              { value: 200, name: '协调' },
              { value: 200, name: '敏捷' }
            ]
          }
        ]
      };
      myChart.setOption(option)
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.myEcharts1()
      this.myEcharts2()
      this.myEcharts3()
      this.myEcharts4()
      this.myEcharts5()
      this.myEcharts6()
    })

  }
}
</script>

<style lang="scss" scoped>
.container-details {
  // background-color: #FFFFFF;
  // width: 7.9375rem;
  // height: 4.6875rem;
  // padding: 0.1667rem 0.1406rem;
  // border-radius: 0.0781rem;
  width: 100%;
  .conTop {
    background-color: #ffffff;
    width: 100%;
    height: 1.3542rem;
    border-radius: 0.0781rem;
    border-bottom: 0.0208rem solid #0fdd8d;
    display: flex;
    .userImg {
      width: 0.5208rem;
      height: 0.5208rem;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .userMessage {
      padding: 0.4375rem 0 0 6%;
      display: flex;
      .userNameId {
        padding-top: 0.099rem;
        padding-left: 0.1563rem;
        & > span {
          font-size: 0.125rem;
          font-weight: 400;
          color: #525252;
          line-height: 0.1719rem;
          display: inline-block;
        }
        div {
          span {
            font-size: 0.0729rem;
            font-weight: 400;
            color: #888888;
            line-height: 0.1042rem;
          }
        }
      }
    }
    .el-divider {
      height: 0.8333rem;
      margin: 0.2969rem 0 0 8.3%;
    }
    .el-divider:last-child {
      height: 0.8333rem;
      margin-left: 0;
    }
    .userMsg {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 2.6042rem;
      div:nth-child(1) {
        margin-top: 0.3542rem;
      }
      div:nth-child(2) {
        margin-top: 0.3542rem;
      }
      div {
        margin-left: 0.4063rem;
        width: 0.5729rem;
        height: 0.2604rem;
        float: left;
        p {
          font-size: 0.0625rem;
          font-weight: 400;
          color: #888888;
          line-height: 0.1042rem;
        }
        span {
          font-size: 0.0729rem;
          font-weight: 400;
          color: #525252;
          line-height: 0.1042rem;
        }
      }
    }
    .userResult {
      padding-top: 0.4531rem;
      padding-left: 10%;
      p {
        font-size: 0.1875rem;
        font-weight: 400;
        color: #0fdd8d;
        line-height: 0.2604rem;
      }
      span {
        font-size: 0.0625rem;
        font-weight: 400;
        color: #888888;
        line-height: 0.1042rem;
      }
    }
  }
  .conEcharts {
    width: 7.9375rem;
    height: 3.2552rem;
    background-color: #f7fafc;
    margin-top: 0.1302rem;
    > div {
      width: 2.5521rem;
      height: 1.5625rem;
      background-color: #fff;
      float: left;
      margin-right: 0.1302rem;
      margin-bottom: 0.1354rem;
      border-radius: 0.0781rem;
    }
    > div:nth-child(3) {
      margin-right: 0;
    }
    > div:nth-child(6) {
      margin-right: 0;
    }
  }
  .conList {
    width: 7.9375rem;
    background-color: #fff;
    margin-top: 0.1302rem;
    border-radius: 0.0781rem;
    padding: 0.125rem 0.151rem;
    .el-form {
      margin-bottom: 0;
      height: 0.2188rem;
      .el-form-item:last-child {
        position: absolute;
        right: 0.0938rem;
        .el-button:first-child {
          width: 0.7396rem;
          height: 0.2188rem;
          background: #f7fbfc;
          border-radius: 0.0521rem;
          font-size: 0.0833rem;
          font-weight: 500;
          color: #525252;
          line-height: 0.1146rem;
        }
        .el-button:last-child {
          width: 0.7396rem;
          height: 0.2188rem;
          background: #0fdd8d;
          border-radius: 0.0521rem;
          font-size: 0.0833rem;
          font-weight: 500;
          color: #ffffff;
          line-height: 0.1146rem;
        }
      }
      /deep/.el-input--medium .el-input__inner,
      .el-input--suffix .el-input__inner,
      .el-select .el-input__inner {
        background-color: #f7fbfc;
        height: 0.2188rem;
        width: 0.7396rem;
        border-radius: 0.0521rem;
      }
      .el-form-item:nth-child(3) {
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner {
          background-color: #f7fbfc;
          height: 0.2188rem;
          width: 1.25rem;
          border-radius: 0.0521rem;
        }
      }
      .el-form-item:nth-child(4) {
        .el-button {
          width: 0.4479rem;
          height: 0.2188rem;
          background: #0fdd8d;
          border-radius: 0.0521rem;
          font-size: 0.0833rem;
          font-weight: 400;
          color: #ffffff;
          line-height: 0.1146rem;
        }
      }
    }
    // 分割线
    .el-divider {
      background-color: #d8f9ed;
      margin-bottom: 0.1042rem;
    }
    // 内容区
    .content {
      margin: 0;
      .conHeader {
        display: flex;
        justify-content: space-between;
        line-height: 0.1875rem;
        font-size: 0.0729rem;
        margin-bottom: 0.0781rem;
        div {
          color: #525252;
          span {
            color: #888888;
          }
        }
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          background-color: #f7fbfc;
          height: 0.1875rem;
          width: 0.7031rem;
          border-radius: 0.0521rem;
        }
      }
      .conBody {
        .el-table {
          /deep/.el-input--medium .el-input__inner,
          .el-input--suffix .el-input__inner,
          .el-select .el-input__inner {
            width: 0.4479rem;
            height: 0.1875rem;
            background: #f8f8f8;
            border-radius: 0.0938rem;
            padding: 0 0.1042rem 0 0.1302rem;
            color: #888888;
          }
          /deep/.el-input__suffix {
            display: none;
          }
        }
      }
    }
  }
}
</style>
